<template>
  <div id="active_list">
	  	<empty class="empty" v-if="isEmpty" message="暂无活动"></empty>
   		<scroll :getMore="loadMore" >
   				<div class="item" v-for="(item,index) in active" :key="index" @click="goActivityDetail(item.id,item.title,item.type)">
						 <!-- 右上角角标 -->
						 <div class="isStartWrapper">
								<img v-if="item.state === '0'" class="isStart" :src="pic_notstarted" alt="">
								<span v-if="item.state === '0'" class="isStartText">未开始</span>
						 		<img v-if="item.state === '1'" class="isStart" :src="pic_tstarted" alt="">
								<span v-if="item.state === '1'" class="isStartText">进行中</span>
						 </div>
						 <!-- 右上角角标结束 -->
   						<div class="top">
   							<div class="row">
	   								<div class="groupbuy">{{item.type}}</div>
	   								<div class="tittle">{{item.title}}</div>
   							</div>
   							<div class="attend">{{item.attendCount}}人参与</div>
   						</div>
   						<div class="bottom">
   							<img class="cover" :src="addPath(item.cover)"/>
   						</div>
               <!-- <div class="details">
            <span class="address"> <i class="iconfont icon-dingwei"></i>{{item.distance}}</span>|<span class="name">{{item.name}}</span><starPercent :percent="item.star*20"></starPercent><span class="special">{{item.special}}</span>
           </div> -->
   				</div>
   		</scroll>
  </div>
</template>
<script>
import scroll from "components/loadmore";
import pic_tstarted from "assets/pic_tstarted.png";
import pic_notstarted from "assets/pic_notstarted.png";
import active_list from "services/event/active_list";
import starPercent from "components/star-percent";
import empty from "components/empty-page-vfhz";
import getLocation from "services/get-location";
import wx from "weixin-js-sdk";
export default {
  components: {
    scroll,
    empty,
    starPercent
  },
  data() {
    return {
      active: [],
      pic_tstarted: pic_tstarted,
      pic_notstarted: pic_notstarted,
      index: 1,
      cityId: "1567",
      latitude: "",
      longitude: "",
      isWxPublic: false,
      isEmpty: false
    };
  },
  props: {
    receType: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    receType: {
      handler: function(curVal, oldVal) {
        this.isEmpty = false;
        this.index = 1;
        active_list.bind(this)(
          {
            methodName: "ListActivityByType",
            areaId: this.$.chooseCity,
            types: curVal,
            pageable: {
              pageNumber: this.index,
              pageSize: 4
            }
          },
          res => {
            this.active = res;
            if (this.active.length === 0) {
              this.isEmpty = true;
            }
          },
          err => {
            console.log(err);
          }
        );
      }
    }
  },
  methods: {
    loadMore() {
      this.index++;
      active_list.bind(this)(
        {
          methodName: "ListActivityByType",
          areaId: this.cityId,
          types:
            [this.$route.params.type][0] == undefined
              ? this.receType
              : [this.$route.params.type],
          pageable: {
            pageNumber: this.index,
            pageSize: 4
          }
        },
        res => {
           for (let i = 0; i < res.length; i++) {
              res[i].distance =  getLocation.getFlatternDistance(this.latitude, this.longitude, res[i].latitude, res[i].longitude)
              res[i].distance = Math.ceil(res[i].distance); // 转换后的距离值
              res[i].distance = res[i].distance > 1000 ? "距您 " + (res[i].distance / 1000).toFixed(1) + "公里" : "距您 < 1公里";  
              this.active.push(res[i]);
            }
          if (this.active.length === 0) {
            vm.isEmpty = true;
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    goActivityDetail(id, title, type) {
      switch (type) {
        case "拼团购":
          this.$router.push({
            name: "eve_groupShopping",
            params: { activityId: id },
            query: { title: title }
          });
          break;
        case "秒杀":
          this.$router.push({
            name: "eve_timeSpike",
            params: { activityId: id },
            query: { title: title }
          });
          break;
        case "抽奖":
          this.$router.push({
            name: "eve_luckyDraw_two",
            params: { activityId: id },
            query: { title: title }
          });
          this.$.get({
              'methodName': 'LotteryInitInfo',
              'category': '2',
              'id': id
            }).then(res => {
              if (res.data.shape === '0') {
                this.$router.push({name: 'eve_luckyDraw_two', params: {activityId: id}, query: {title: title}})
              } else {
                this.$router.push({name: 'eve_luckyDraw', params: {activityId: id}, query: {title: title}})
              }
            })
          break;
        case "推荐有礼":
          this.$router.push({
            name: "eve_recommend",
            params: { activityId: id },
            query: { title: title }
          });
          break;
      }
    },
    //获取定位信息
    getPosition() {
      //判断微信环境
      if (this.isWxPublic) {
        alert("微信微信");
        //获取签名
        let vm = this;
        vm.$.wxSign();
        wx.ready(function() {
          wx.getLocation({
            type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function(res) {
              getLocation.getAdd(res.latitude, res.longitude).then(res => {
                vm.latitude = res[0].y;
                vm.longitude = res[0].x;
                alert("latitude" + vm.latitude);
                getLocation.getCityName(vm.latitude, vm.longitude).then(res => {
                  let cityName = res.addressComponent.city;
                  alert("cityName" + cityName);
                  getLocation.getCityId(cityName).then(res => {
                    alert("cityid" + vm.cityId);
                    alert(active_list);
                    vm.cityId = res.cityId;
                    active_list.bind(vm)(
                      {
                        methodName: "ListActivityByType",
                        areaId: vm.cityId,
                        types:
                          [vm.$route.params.type][0] == undefined
                            ? this.receType
                            : [vm.$route.params.type],
                        pageable: {
                          pageNumber: vm.index,
                          pageSize: 4
                        }
                      },
                      res => {
                        alert(JSON.stringify(res));
                        vm.active = res;
                        alert(vm.active.length);
                        alert(vm.active.length === 0);
                        if (vm.active.length === 0) {
                          vm.isEmpty = true;
                        }
                      },
                      err => {
                        console.log(err);
                      }
                    );
                  });
                });
              });
            }
          });
        });
      } else {
        let vm = this;
        this.$.push("data_getLatLng", {}, res => {
            res = JSON.parse(res);
            getLocation.getAdd(res.latitude,res.longitude).then(res=>{
                vm.latitude = res[0].y
                vm.longitude = res[0].x
            })
        });
        active_list.bind(vm)(
          {
            methodName: "ListActivityByType",
            areaId: vm.$.chooseCity,
            types:
              [vm.$route.params.type][0] == undefined
                ? vm.receType
                : [vm.$route.params.type],
            pageable: {
              pageNumber: vm.index,
              pageSize: 4
            }
          },
          res => {
            //通过经纬度计算距离
            for (let i = 0; i < res.length; i++) {
              res[i].distance =  getLocation.getFlatternDistance(this.latitude, this.longitude, res[i].latitude, res[i].longitude)
              res[i].distance = Math.ceil(res[i].distance); // 转换后的距离值
              res[i].distance = res[i].distance > 1000 ? "距您 " + (res[i].distance / 1000).toFixed(1) + "公里" : "距您 < 1公里";  
              this.active.push(res[i]);
            }
            if (vm.active.length === 0) {
              vm.isEmpty = true;
            }
          },
          err => {
            console.log(err);
          }
        );
      }
    }
  },
  created() {
    alert(this.$.env);
    alert(this.$.env === "wxPublic");
    if (this.$.env === "wxPublic") {
      this.isWxPublic = true;
      this.getPosition();
    } else {
      this.getPosition();
    }
  }
};
</script>
<style scoped="scoped">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#active_list .empty {
  height: 100vh;
}
.item {
  display: flex;
  flex-flow: column;
  position: relative;
  padding: 8px 0;
  margin: 0 8px;
  border-bottom: 1px solid #ccc;
}
.item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.item .groupbuy {
  padding: 4px;
  background: #f98700;
  color: #fff;
  border-radius: 6px;
}
.item .tittle {
  padding: 4px;
}
.item .attend {
  padding: 4px;
  color: #999;
}
.item .bottom {
  display: flex;
  justify-content: center;
  width: calc(100vw - 16px);
  border-radius: 10px;
  height: 45vw;
  overflow: hidden;
}
.item .bottom .cover {
  width: 100%;
  object-fit: cover;
}
.item .isStartWrapper {
  position: absolute;
  top: 50px;
  height: 30px;
  right: -5px;
  width: 60px;
}
.item .isStartWrapper img {
  width: 100%;
  height: 100%;
}
.item .isStartText {
  position: absolute;
  color: #fff;
  top: 10px;
  right: 10px;
}
.item .details {
  display: flex;
  margin-top: 5px;
  height: 30px;
  line-height: 30px;
}
.item .details .star-percent{
  flex: 1;
  height: 30px;
  line-height: 30px;
}
.item .details span{
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.item .details .address{
  flex: 0 0 100px;
}
.item .details .name{
  flex: 0 0 100px;
}
.item .details span.special{
  flex: 0 0 15vw;
}
</style>
<style>
.item .details .star-percent .star-wrapper{
  width: 1.7rem!important;
}
.item .details .star-percent .star-wrapper i{
  font-size: 1.5rem!important;
}
</style>
